<template>
    <z-paging @query="queryList" :refresher-enabled="true" ref="paging" v-model="dataList" class="my-progress-page">
        <view class="margin-x-10 padding-10 color-bg-fff">
            <view class="padding-10" v-for="(item, index) in dataList" :key="index">
                 <view class="flex-start">
                    <view style="width: 80%;">
                        <view class="color-333 margin-bottom-10">{{ item.bankName }}</view>
                        <view class="color-999 font-12">{{ item.description }}</view>
                        <view class="color-999 font-12 margin-top-5">
                            已做：{{ item.completedQuestions }}/{{ item.totalQuestions }}
                        </view>
                        <view class="color-999 font-12 margin-top-5">
                            正确率：{{ formatRate(item.accuracyRate) }}
                        </view>
                        <view class="color-999 font-12 margin-top-5">
                            进度：{{ formatRate(item.progressPercent) }}
                        </view>
                         <view class="color-999 font-12 margin-top-5 status-row">
                             <view class="status" :style="{ background: getStatusColor(item.isCompleted) }"></view>
                             <view class="color-333 font-12">{{ getStatusText(item.isCompleted) }}</view>
                         </view>
                        <view class="color-999 font-12 margin-top-5" v-if="item.lastPracticeTime">
                            最近练习：{{ formatTime(item.lastPracticeTime) }}
                        </view>
                    </view>
                     <view class="flex-center" style="width: 20%;">
                         <u-button  type="error" plain @click="onReset(item)">重置</u-button>
                     </view>
                </view>
                <u-line margin="30rpx 0 0 0"></u-line>
            </view>
        </view>
    </z-paging>
</template>

<script>
import { myBankProgressInfo, resetBankProgress } from '@/api/exam/userPracticeRecord'

export default {
    data() {
        return {
            dataList: [],
        }
    },
    methods: {
        async queryList() {
            try {
                const res = await myBankProgressInfo();
                const list = Array.isArray(res?.data) ? res.data : [];
                this.$refs.paging.complete(list);
            } catch (e) {
                this.$refs.paging.complete([]);
                uni.showToast({ title: '获取进度失败', icon: 'none' });
            }
        },
         onReset(item) {
             uni.showModal({
                 title: '确认重置',
                 content: `是否重置【${item.bankName}】的学习进度？`,
                 confirmText: '重置',
                 success: (res) => {
                     if (res.confirm) {
                         this.resetBankProgress(item);
                     }
                 }
             });
         },
         async resetBankProgress(item) {
            try {
                uni.showLoading({ title: '重置中...', mask: true });
                await resetBankProgress(item.bankId);
                uni.hideLoading();
                uni.showToast({ title: '重置成功', icon: 'none' });
                setTimeout(() => {
                    this.$refs.paging.reload();
                }, 300);
            } catch (e) {
                uni.hideLoading();
                const msg = e?.msg || e?.message || '重置失败';
                uni.showToast({ title: msg, icon: 'none' });
            }
         },
        getStatusText(isCompleted) {
            return String(isCompleted) === '1' ? '已完成' : '学习中';
        },
        getStatusColor(isCompleted) {
            return String(isCompleted) === '1' ? '#4CD964' : '#5BA2F9';
        },
        formatRate(val) {
            if (val === null || val === undefined || val === '') return '0%';
            const num = Number(val);
            if (Number.isNaN(num)) return '0%';
            // 如果大于100%，则限制为100%
            const finalNum = num > 100 ? 100 : num;
            return `${Number(finalNum).toFixed(2).replace(/\.00$/, '')}%`;
        },
        formatTime(isoStr) {
            try {
                const d = new Date(isoStr);
                const y = d.getFullYear();
                const m = `${d.getMonth() + 1}`.padStart(2, '0');
                const day = `${d.getDate()}`.padStart(2, '0');
                const hh = `${d.getHours()}`.padStart(2, '0');
                const mm = `${d.getMinutes()}`.padStart(2, '0');
                return `${y}-${m}-${day} ${hh}:${mm}`;
            } catch (e) {
                return isoStr;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.my-progress-page {
    font-size: 30rpx;
}

.my-progress-page .font-12 {
    font-size: 26rpx !important;
}

  .status-row {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }

.status {
    display: inline-block;
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    margin-right: 12rpx;
    vertical-align: middle;
}
</style>